<template>
    <div class="by-double-list">
            <div class="by-double-list-left by-public"  v-for="items in shopList" :key="items.id" >
                <router-link to="/home/hot/111">
                    <img :src="items.image" @click='chuancan(items)'>
                    <!-- <img :src="items.image" @click='chuancan({id:items.id,madeIn:items.subtitle,price:items.priceStr,shopImg:items.image,shopName:items.mainTitle})'> -->
                </router-link>
                <div class="by-details-msg">
                    <span class="by-shop-price">￥{{items.priceStr}}</span>
                    <p class="span-style">
                        <span v-for="(item , index) in items.labels" :key="index" :style="{backgroundColor:item.color,color:item.textColor ,borderColor:item.roundColor}">{{item.content}}</span>
                    </p>
                    <p class="made-boss">{{items.subtitle}}</p>
                    <p class="shop-name">{{items.mainTitle}}</p>
                    <span class="good-speak">{{items.priceCent}}+条好评</span>
                </div>
            </div>
            <div class="swipe-column">
                <van-swipe style="height: 0.64rem;" vertical :autoplay="4000" :show-indicators="false">
                    <van-swipe-item v-for="(item , index) in swipeList" :key="index">
                        <!-- <img src="http://bfs.biyao.com/group1/M00/19/AB/rBACVFmkN-eATOsNAABytpTV4yU662.png"> -->
                        <img :src="item.avatarUrl">
                        <span>{{item.nickname}}发起了一起拼</span>
                    </van-swipe-item>
                </van-swipe>
                <router-link to="/group" class="go-pin" tag="span">去参团 〉</router-link>
                <!-- <span class="go-pin">去参团 〉</span> -->
            </div>
    </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'

import { mapState, mapGetters, mapMutations } from 'vuex'

    

export default {
    props:['shopList','swipeList'],
    mounted() {
        
    },
    methods: {
        chuancan( ob ){
            this.$store.state.page = ob
            // this.$root.root = ob
            // console.log(this.$root.root)
            window.localStorage.setItem('shopDetails',JSON.stringify(ob))
        },
        onScroll(pos){
            console.log(pos.y)
        },
    },
    // computed: {
    //     ...mapState
    // },
}
</script>

<style lang="stylus" scoped>
@import '~assets/border.styl' 

    .by-double-list
            width 100% 
            height 6rem
            display flex
            .by-double-list-left,.by-public
                height 100%
                flex 1
                display flex
                flex-direction column
                overflow hidden
                img 
                    width 3.74rem
                    height 3.74rem
                .by-details-msg
                    padding 0 0.24rem
                    box-sizing border-box
                    .by-shop-price
                        font-size 0.32rem
                        color #f7a701
                    .span-style
                        display flex
                        justify-content flex-start
                        align-items center
                        // height .4rem
                        // line-height .4rem
                        span
                            margin 0 0.1rem 0 0
                            text-align center
                            border .01rem
                            border-style solid
                            font-size 0.12rem
                            border-radius 0.05rem
                    .made-boss
                        font-size 0.24rem
                        color #bf9e6b
                        overflow hidden
                        text-overflow ellipsis
                        white-space nowrap
                    .shop-name
                        font-size 0.24rem
                        color #4a4a4a
                    .good-speak
                        font-size 0.2rem
                        color #bbbbbb 
            .by-double-list-right
                height 100%
                flex 1
        .swipe-column
            width 5.56rem
            height 0.64rem
            background-color rgb(76,76,76)
            position fixed
            bottom 1.5rem
            border-radius 0.3rem
            left 50%
            margin-left -2.78rem
            opacity 0.2
            display flex
            justify-content space-between
            align-items center
            .van-swipe
                flex 4
                color #fff
                line-height 0.64rem
                img 
                    width 0.64rem
                    height 0.64rem
                    border-radius 50%
                    margin-right 0.3rem
            .go-pin
                flex 1
                color #fff
</style>
